<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div style="left:15px;top:15px;position:absolute;background-color:rgba(255,255,255,0.85);z-index:10;width:450px;height:270px;border-radius:5px"></div>
        <el-main style="left:15px;top:15px;position:absolute;box-shadow:0 0 5px gray;z-index:11;width:450px;height:270px;border-radius:5px">
            <span style="display:block;font-size:18px;width:100%;margin-bottom:10px;"><b>符号调整工具</b></span>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>符号颜色调整:&nbsp;&nbsp;&nbsp;</span>
                <el-color-picker color-format='rgb' v-model="color_value" :show-alpha="true" 
                :predefine="predefineColors" @change="color_change" ></el-color-picker>
                <span style="margin-left:20px">边线宽度调整:&nbsp;&nbsp;&nbsp;</span>
                <el-slider :step="0.1" style="width:100px;" :min="1" :max="10" v-model="边线宽度" @input="边线宽度调整"></el-slider>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>风格调整:&nbsp;&nbsp;&nbsp;</span>
                <el-radio-group v-model="符号风格" @change="符号风格调整">
                    <el-radio-button value="solid">实线</el-radio-button>
                    <el-radio-button value="dash">短线</el-radio-button>
                    <el-radio-button value="dot">点线</el-radio-button>
                    <el-radio-button value="dash-dot">短线_点线</el-radio-button>
                </el-radio-group>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>端头类型:&nbsp;&nbsp;&nbsp;</span>
                <el-radio-group v-model="端点类型" @change="端点类型调整">
                    <el-radio-button value="butt">平端口</el-radio-button>
                    <el-radio-button value="round">圆形端头</el-radio-button>
                    <el-radio-button value="square">方形端头</el-radio-button>
                </el-radio-group>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>连接类型:&nbsp;&nbsp;&nbsp;</span>
                <el-radio-group v-model="连接类型" @change="连接类型调整">
                    <el-radio-button value="bevel">平头斜接</el-radio-button>
                    <el-radio-button value="miter">尖头斜接</el-radio-button>
                    <el-radio-button value="round">圆头斜接</el-radio-button>
                </el-radio-group>
            </div>
        </el-main>
    </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
var map,view,要素图层
const 符号风格=ref('solid')
const color_value=ref('rgba(200,50,50,1)')//双向绑定变量,控制填充颜色
const predefineColors = ref([//提供默认颜色
  '#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1', '#1e90ff', '#c71585',
])
var color_change=()=>{
    要素图层.renderer.symbol.color=color_value.value
}
const 边线宽度=ref(1)
var 边线宽度调整=()=>{
    要素图层.renderer.symbol.width=边线宽度.value
}
var 符号风格调整=()=>{
    要素图层.renderer.symbol.style=符号风格.value
}
const 端点类型=ref('butt')
var 端点类型调整=()=>{
    要素图层.renderer.symbol.cap=端点类型.value
}
const 连接类型=ref('round')
var 连接类型调整=()=>{
    要素图层.renderer.symbol.join=连接类型.value
}
要素图层=new FeatureLayer({
    url:"https://ws8575.club/web/rest/services/Hosted/道路_线要素_要素图层_3857/FeatureServer/0",
    renderer:{
        type:"simple",
        symbol:{ 
            type:"simple-line",
            style:"solid",
            color:[200,50,50],
            width:1
        }
    }
})
map=new Map({
    basemap:"dark-gray-vector",
    layers: [要素图层]
})
onMounted(()=>{
view = new MapView({
    map: map,  container: "viewDiv",
    center:[118,36],zoom:5,
    constraints:{
        minScale:5000000,
        maxScale:1300,
        rotationEnabled:false
    },
})
view.ui.remove(["zoom","attribution"])

})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
height:100%;width:100%;padding:0;margin:0;
}
span{
    white-space: pre-line;
    color:rgb(100,100,100)
}
</style>